<template>
	<app-layout @cek="afterlogin" :isqunshare='isqunshare'>
		<view class="">
			<tastlist flotop="360rpx" floleft="0" ref="task" :movepop="false" :autos="false" whegroup></tastlist>
		</view>
		<view class="contetn">
			<view class="a-image">
				<image class="image" :src="topimginfo.icon_url" mode="widthFix"></image>
				<view class="all-num">
					本人总金币数{{integral}}
				</view>
				<view class="all-mx" @click="jump('/pages/user-center/integral-detail/integral-detail')">
					查看明细>>>
				</view>
			</view>
			<view class="befbutton fbutton" v-if="!issignin && issharequn" @click="signin">
				登录后方可帮助好友获取金币
			</view><!-- v-if="!isOpenSettings && issharequn" -->
			<view class="befbutton fbutton bhbut" v-if="!isOpenSettings && issharequn" @click="openset">
				在设置中开启通知/订阅用来订阅
			</view>
			<view class="befbutton fbutton bhbut" v-if="isOpenSetGoid && issharequn" @click="openset">
				在设置中打开帐户资金变动提醒
			</view>
			<!-- v-if="!issubscribe && issharequn" -->
			<view class="befbutton fbutton bhbut" v-if="isOpenSettings && issharequn" @click="tips">
				点击此按钮用于订阅提示金币到账消息
			</view>
			<!-- <view class="befbutton fbutton bsbut" v-if="issignin"
				@click="jump('/pages/user-center/integral-detail/integral-detail')">
				查看金币明细
			</view> -->

			<view class="sibling">
				<view class="dir-left-nowrap sibltab sibtab">
					<view class="tab1">
						排名
					</view>
					<view class="tab2">
						微信名
					</view>
					<view class="tab3">
						群内获得金币数量
					</view>
					<view class="tab4">
						怎样获取与使用
					</view>
				</view>
				<view class="dir-left-nowrap cross-center sibmyself sibtab" v-if="list.length != 0 && myinfo.id">
					<view class="tab1">
						<view class="">
							我的排名
						</view>
						<view class="">
							第{{myinfo.paihang}}名
						</view>
					</view>
					<view class="dir-left-nowrap cross-center tab2">
						<image class="avatar" :src="myinfo.user.userInfo.avatar" mode=""></image>
						<view class="nickname u-line-4">
							{{myinfo.user.nickname}}
						</view>
					</view>
					<view class="tab3">
						{{myinfo.uiintegral}}
					</view>
					<view class="tab4" @click="taskshow">
						<view class="">
							怎样获得与使用
						</view>
						<view class="">
							点击进入>>>
						</view>
					</view>
				</view>
				<view class="dir-left-nowrap cross-center siball sibtab"
					:class="((index+1)%6 == 0) || ((index+1)%6 == 5) || ((index+1)%6 == 4) ? 'linebg' : ''"
					v-for="(item,index) in list" :key="index">
					<view class="tab1">
						第{{index+1}}名
					</view>
					<view class="dir-left-nowrap cross-center tab2">
						<image class="avatar" :src="item.user.userInfo.avatar" mode=""></image>
						<view class="nickname">
							{{item.user.nickname}}
						</view>
					</view>
					<view class="tab3">
						{{item.uiintegral}} <!-- 总金币 -->
					</view>
					<view class="tab4" @click="taskshow">
						<view class="">
							怎样获得与使用
						</view>
						<view class="">
							点击进入>>>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="follow" v-for="(item,index) in list" :key="index">
				<image class="avatar" :src="item.user.userInfo.avatar" mode=""></image>
				<view class="nickname u-line-4">
					{{item.user.nickname}}
				</view>
				<view class="dir-left-nowrap">
					已转发{{item.sort}}人，获得{{item.shownums}}金币
				</view>
			</view> -->
			<view class="nopt" v-if="list.length == 0">
				暂无排行
			</view>
			<view class="" style="height: 224rpx;"></view>
			<view class="bottomimg" @click="tourlste(tourlsrc)">
				<image class="bottom-img" :src="tourlimg"></image>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import tastlist from '../../pages/tasklist/tasklist.vue'
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			tastlist
		},
		data() {
			return {
				page: 1,
				limit: 20,
				pagecount: 1,
				list: [],
				isexamine: false, // 是否审核
				isadopt: true, // 是否通过
				issignin: true, // 是否登录
				issubscribe: true, // 是否订阅
				isOpenSettings: true, // 是否打开设置 false 显示
				isOpenSetGoid: false, // 是否打开设置 金币通知
				issharequn: false, // 是否是分享在群打开

				shareid: null, // 分享者id
				mall_id: 1,
				myinfo: [],
				topimginfo: '',

				integral: 0,

				tourlimg: '',
				tourlsrc: '',

				isqunshare: 0 // 群分享登录页面样式不同
			}
		},
		onLoad(options) {
			// console.log(options, '********');
			// uni.hideShareMenu()
			this.shareid = options.sharerid || null
			this.mall_id = options.mall_id || 1
			this.issharequn = options.issharequn || false
			this.isqunshare = options.isqunshare || 0
			this.onReq(253)
			this.onReq(260)
			this.allgold()
			// console.log(this.shareid, this.mall_id, '**************');
			if (!this.$user.isLogin()) {
				this.issignin = false
			} else {
				this.issignin = true

				if (this.issharequn) {
					let pdata = {
						mall_id: this.mall_id
					}
					if (this.shareid != null) {
						pdata.puser_id = this.shareid
					}
					this.$request({
						url: this.$api.wechat_group.share,
						data: pdata
					}).then(res => {
						let qunname = res.data && res.data.puser ? res.data.puser.nickname : ''
						if (res.msgstatus) {
							uni.showModal({
								title: qunname ? '你已绑定' + qunname + '群主，在其他群里无法获取金币哦' : res.msg,
								showCancel: false
							})
						}
					}).catch(err => {})
				}
				this.loadList()
			}
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: this.custitle ? this.custitle : '双熙堂珠宝',
				path: '/pages/showindex/forward',
				imageUrl: this.imglist == '' ? '' : this.imglist,
				params: {
					sharerid: this.shareid,
					mall_id: this.mall_id
				}
			});
		},
		onShow() {
			uni.getSetting({
				withSubscriptions: true,
				success: (res) => {
					// console.log(res);
					if (res.subscriptionsSetting) {
						if (res.subscriptionsSetting.mainSwitch) {
							this.issubscribe = true
							this.isOpenSettings = true
							if (res.subscriptionsSetting.itemSettings) {
								if (res.subscriptionsSetting.itemSettings
									.Rk_zaoCmy4SYCqGhzw8cnYcBSWvCBWVdx5v - uWCk4gw == 'accept'
								) { // .Rk_zaoCmy4SYCqGhzw8cnYcBSWvCBWVdx5v-uWCk4gw
									this.isOpenSetGoid = false
								} else {
									this.isOpenSetGoid = true
								}
							}
						} else {
							this.issubscribe = true
							this.isOpenSettings = false
							// uni.openSetting()
						}
					} else {
						this.issubscribe = false
						this.isOpenSettings = true
					}
				},
				fail: (err) => {
					this.issubscribe = false
					this.isOpenSettings = true
					this.isOpenSetGoid = true
				}
			})
		},
		/* watch: {
			isLogin(o, v) {
				console.log(o, v, '////////////////');
			}
		}, */
		/* onShow() {
			this.list = []
			this.page = 1
			this.pagecount = 1
			this.loadList()
		}, */
		onReachBottom() {
			if (this.pagecount > this.page) {
				this.page++
				this.loadList()
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		methods: {
			tourlste(url) {
				if (url == 'javascript:;') {
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			signin() {
				this.$store.dispatch('user/accessToken')
			},
			afterlogin() {
				this.issignin = true
				this.page = 1
				this.pagecount = 1
				this.list = []
				let pdata = {
					mall_id: this.mall_id
				}
				if (this.shareid != null) {
					pdata.puser_id = this.shareid
				}
				this.$request({
					url: this.$api.wechat_group.share,
					data: pdata
				}).then(res => {
					let qunname = res.data && res.data.puser ? res.data.puser.nickname : ''
					if (res.msgstatus) {
						uni.showModal({
							title: qunname ? '你已绑定' + qunname + '群主，在其他群里无法获取金币哦' : res.msg,
							showCancel: false
						})
					}
				}).catch(err => {})
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						// console.log(res);
						if (res.subscriptionsSetting) {
							if (res.subscriptionsSetting.mainSwitch) {
								this.issubscribe = true
							} else {
								this.issubscribe = true
								this.isOpenSettings = false
								// uni.openSetting()
							}
						} else {
							this.issubscribe = false
						}
					},
					fail: (err) => {
						this.issubscribe = false
					}
				})
				this.loadList()
			},
			tips() {
				uni.getSetting({
					withSubscriptions: true,
					success: (res) => {
						// console.log(res);
						if (res.subscriptionsSetting) {
							if (res.subscriptionsSetting.mainSwitch) {
								this.issubscribe = true
							} else {
								this.issubscribe = true
								this.isOpenSettings = false
								// uni.openSetting()
							}
						} else {
							this.issubscribe = false
						}
					},
					fail: (err) => {
						this.issubscribe = false
					}
				})
				// #ifdef MP-WEIXIN
				// 
				// Rk_zaoCmy4SYCqGhzw8cnYcBSWvCBWVdx5v-uWCk4gw
				this.$subscribe(['Rk_zaoCmy4SYCqGhzw8cnYcBSWvCBWVdx5v-uWCk4gw']).then(res => {
					// console.log(res, 'siccc');
				}).catch(e => {
					// console.log(e, 'eee');
				})
				// #endif
			},
			openset() {
				uni.openSetting()
			},
			jump(item) {
				if (item == '/' || item == 'javascript:;') {
					return
				}
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return;
				}
				uni.navigateTo({
					url: item
				})
			},
			taskshow() {
				this.$refs.task.showMo()
			},
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 253) {
						this.topimginfo = res.data.list[0]
					} else if (kid == 260) {
						this.tourlimg = res.data.list[0].icon_url
						this.tourlsrc = res.data.list[0].url
					}
				}).catch(() => {

				})
			},
			allgold() {
				let that = this
				that.$request({
					url: that.$api.integral_mall.index,
				}).then(response => {
					if (response.code === 0) {
						that.integral = response.data.userInfo.integral;
					}
				})
			},
			loadList() {
				let pdata = {
					page: this.page,
					// user_id: this.userInfo.options.user_id,
					mall_id: this.mall_id
				}
				if (this.shareid) {
					pdata = {
						page: this.page,
						// user_id: this.userInfo.options.user_id,
						mall_id: this.mall_id,
						puser_id: this.shareid
					}
				}
				this.$request({
					url: this.$api.wechat_group.ranking_list,
					data: pdata
				}).then(res => {
					this.myinfo = res.data.userph
					this.list = this.list.concat(res.data.list)
					/* this.list.sort((a, b) => {
						return a.sort - b.sort
					}) */
					this.pagecount = res.data.pagination.page_count
				}).catch(err => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottomimg {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;

		.bottom-img {
			width: 100%;
			height: 200rpx;
		}
	}

	.a-image {
		width: 100%;
		position: relative;
		color: #FFFFFF;
		font-size: 28rpx;

		.all-num {
			position: absolute;
			bottom: 10rpx;
			left: 5rpx;
		}

		.all-mx {
			position: absolute;
			bottom: 10rpx;
			right: 5rpx;
		}

		.image {
			width: 100%;
		}
	}

	.sibling {
		width: 100%;
		margin-top: 12rpx;

		.sibtab {
			text-align: center;
			border-bottom: 2rpx #000000 solid;
			font-size: 26rpx;
			padding: 18rpx 0;
		}

		.sibltab {
			background-color: #f9da4e;
			// height: 40rpx;
			line-height: 40rpx;
			padding: 0;
		}

		.sibmyself {
			background-color: #44e6fd;
		}

		.linebg {
			background: #43e5ff;
		}

		.tab1 {
			margin-left: 21rpx;
			width: 138rpx;
		}

		.tab2 {
			margin-left: 10rpx;
			width: 240rpx;
		}

		.tab3 {
			margin-left: 10rpx;
			width: 106rpx;
		}

		.tab4 {
			margin-left: 26rpx;
			width: 188rpx;
		}

		.avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 64rpx;
		}

		.nickname {
			flex: 1;
			padding: 0 0 0 24rpx;
		}
	}

	.siball {
		background-color: #FFFFFF;
	}

	.sibmore {
		background-color: #b5f5ff;
	}

	.befbutton {
		background: #342B2A;
		width: 100%;
		height: 168rpx;
		overflow: hidden;
		color: #FFFFFF;
		text-align: center;
	}

	.fbutton {
		border-radius: 0;
		width: 100%;
		height: 168rpx;
		line-height: 168rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bhbut {
		background: #9a5e3b;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}

	.contetn {
		// background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		// padding: 0 24rpx;
	}

	/* .follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;
		position: relative;
		padding: 0 12rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.nickname {
			flex: auto;
			padding: 0 20rpx;
		}
	} */
	.follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;
		position: relative;
		padding: 0 36rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.nickname {
			flex: 1;
			padding: 0 20rpx;
		}

		.reviewed {
			padding: 10rpx 20rpx;
			border: 1rpx solid #dcdcdc;
			border-radius: 12rpx;
		}

		.tips {
			position: absolute;
			top: 5rpx;
			right: 12rpx;
			font-size: 24rpx;
			color: #353535;
		}

		.approved {
			color: #279e1a;
		}

		.approvedf {
			color: #cf0000;
		}
	}

	.follow+.follow {
		border-top: 1rpx solid #dcdcdc;
	}

	.nopt {
		text-align: center;
		line-height: 360rpx;
		font-size: 24rpx;
	}
</style>
